<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-1.11.0.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <style type="text/css">
        body{
            background: url(img/bodyimg1.jpg) no-repeat left top;
            background-size:100%;
            background-attachment:fixed;
        }
        .nc_scale {
            background: #e8e8e8 !important;
        }
        .nc_scale div.bc_bg {
            background: #7ac23c !important;
        }
        .nc_scale .scale_text2 {
            color: #fff !important;
        }
        .nc_scale span {
            border: 1px solid #ccc !important;
        }
        .errloading {
            border: #faf1d5 1px solid !important;
            color: #ef9f06 !important;
        }
    </style>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        .container-1 {
            vertical-align: middle;
            background-color: #fff;
            padding: 40px 80px 30px;
            position: relative;
            height: 600px;
            width: 600px;
            margin: auto;
            border: 1px black solid;
            margin-top: 80px;
            opacity:0.9;
        }

        .container-2, .container-3 {
            vertical-align: middle;
            text-align: center;
        }

        .ip-1, .ip-2 {
            height: 50px;
            outline: none;
            resize: none;
            font-size: 20px;
            width: 360px;

        }
        .ip-3{
            height: 50px;
            font-size: 20px;
            width: 170px;
            float: left;
        }

        .ip-4 {
            height: 50px;
            width: 360px;
            background-color: #b9def0;
            color: white;
            font-size: 20px;
            font-weight: bolder;
        }

        input {
            margin: 0;
            padding: 0;
            outline: none;
            resize: none;
            font-size: 14px;
        }

        .p-1 {
            font-size: 40px;
        }

        .p-left {
            float: left;
        }

        .p_right {
            float: right;
            color: #b9def0;
        }

        .container-3 {
            margin-top: 30px;
        }
        .alert {
            margin: 0 auto;
            padding: 6px 10px;
            border: 1px solid transparent;
            text-align: left;
            color: #a94442;
            background-color: #f2dede;
            border-color: #ebccd1;
            margin-bottom: 17px;
            font-size: 12px;
            width: 360px;
        }
        .role{
            color: blue;

        }
        .checkdiv{
            border: 1px #f36c79 solid;
            background-color: #f5d7d7;
            margin-top: 0px;
            width: 360px;
            height: 30px;
            margin-left: 39px;
            display: none;
            font-size: 18px;
            font-weight: bolder;
        }
    </style>
</head>
<body>
<div class="container-1">
    <div class="container-2">
        <p class="p-1" style="color: red">修改个人资料</p>
    </div>
    <div class="container-3">
        <form id="formregister">
            <div class="form-group">
                <input type="text"  placeholder="用户名" class="ip-1" name="username" id="username" readonly>
                <br>
                <div class="checkdiv" id="checkdiv">
                    <span id="c-msg"></span>
                </div>
            </div>
            <br>
            <div class="form-group">
                <input type="password"  placeholder="密码" class="ip-2" name="password" id="password">
            </div>
            <br>
            <div class="form-group">职业：
                <label><input name="job" type="radio" value="研究/博士生" id="job1"/>研究/博士生</label>
                <label><input name="job" type="radio" value="大学生" />大学生 </label>
                <label><input name="job" type="radio" value="高学生" />高中生</label>
                <label><input name="job" type="radio" value="初学生" />初中生</label>
                <label><input name="job" type="radio" value="小学生"  />小学生</label>
                <label><input name="job" type="radio" value="工作" />工作</label>
                <label><input name="job" type="radio" value="其它" />其它</label>
            </div>
            <br>
            <div class="form-group role">
                <input name="confirm" type="checkbox" onclick="agree();" id="cb" size="100"/><lable for="cb">我同意使用说明，使用说明见首页(账号不可更改)</lable>
            </div>
            <br>
            <button type="button" name="submit1" value="提交" disabled="disabled" id="bsubmit" class="btn btn-default ip-4" >修改</button>
        </form>
    </div>
</div>
<script>
    $(function () {
        $.post("user/modify",{},function (data) {
            $("#username").val(data.username);
            $("#password").val(data.password);
        },"json");
    });
    function agree(){
        if(document.getElementById('cb').checked)
            document.getElementById('bsubmit').disabled=false;
        else
            document.getElementById('bsubmit').disabled='disabled';
    }

</script>
<script>
    // <!--$(function () {-->
    //     <!--$("#username").blur(function () {-->
    //         <!--var username = $(this).val();-->
    //         <!--$.get("CheckUserServlet",{username:username},function (data) {-->
    //             <!--var span=$("#c-msg");-->
    //             <!--if (data.checkUser){-->
    //                 <!--$("#checkdiv").attr("style","display:block;");-->
    //                 <!--$("#checkdiv").css("border","1px green solid");-->
    //                 <!--$("#checkdiv").css("background-color","#98FB98");-->
    //                 <!--span.css("color","green");-->
    //                 <!--span.html(data.msg);-->
    //             <!--}-->
    //             <!--else {-->
    //                 <!--$("#checkdiv").attr("style","display:block;");-->
    //                 <!--span.css("color","#f36c79");-->
    //                 <!--span.html(data.msg);-->
    //             <!--}-->
    //         <!--},"json")-->
    //     <!--});-->
    // <!--});-->
    $("#bsubmit").click(function () {
        if (confirm("是否确定修改")) {
            $.post("user/update", $("#formregister").serialize(), function (data) {
                if (data.register==false){
                    location.href="personalpage.html";
                }
            }, "json")
        }
    })
</script>
</body>
</html>